<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>
<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen">
            </div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script> 
        //资源路径
        var ws_url = "ws://" + location.host + "/hall"; /*/hall 表示请求类型是大厅*/
        //websocket 对象
        var ws = null;

        //若websocket 长连接页面关闭 , 这里也断开连接
        window.onbeforeunload  = function() {
            ws.close();
        }

        // 按钮两个处理状态 , 没有匹配的状态(开始匹配) , 匹配中的状态 (停止匹配)
        var button_flag = "stop"; //默认是没有开始匹配用户点击开始匹配
        //匹配点击按钮处理 : 
        var be = document.getElementById("match-button"); // 获取按钮
        be.onclick = function() {
            /*为按钮添加点击事件的处理函数*/ 
            if(button_flag == "stop")
            {
                //用户需要点击开始匹配 , 向后端发送开始匹配的请求
                /*1. 组织一个请求开始匹配 Json*/
                var req = {
                    optype : "match_start"
                } 
                /*2. 对组织的串序列化并发送至服务端*/
                ws.send(JSON.stringify(req));
            }
            else
            {
                //用户需要点击停止匹配 , 向后端发送停止匹配的请求
                /*1. 组织一个请求停止匹配 Json*/
                var req = {
                    optype : "match_stop"
                } 
                /*2. 对组织的串序列化并发送至服务端*/
                ws.send(JSON.stringify(req));
            }
        }

        function get_user_info()
        {
            //1. 通过 ajax 向服务器发起获取用户信息的请求
            $.ajax({
                url  : "/userinfo",
                type : "GET", 
            //2. 获取服务器返回的序列化的用户信息
                success : function(res)
                {   
                    /*1. 段位判断*/
                    let dan;
                    if(res.score < 2000)  {dan = "青铜";}
                    else if(res.score >= 2000 && res.score < 3000) {dan = "白银";}
                    else if(res.score >= 3000 && res.score < 4000) {dan = "黄金";}
                    else if(res.score >= 4000 && res.score < 5000) {dan = "钻石";}
                    else if(res.score >= 5000) {dan = "王者";}

                    /*2. 计算胜率(通过获胜场数/总场数(!=0)) , 结果保留两位小数*/
                    const winRate = res.total_count > 0 ? ((res.win_count / res.total_count) * 100).toFixed(2) + "%" : "0.00%"; 
                    /*3. 成功了, 构建一个用户信息 html 信息*/
                        var user_info_html = `
                        <div style="max-width: 400px; margin: 10px auto 0 auto; padding: 15px; background-color: rgba(128, 128, 128, 0.7); border-radius: 8px 8px 0 0; text-align: center; border: none; outline: none; box-shadow: none;">
                            <p style="margin: 0 0 10px 0;">
                                用户名: ${res.username} | 段位: ${dan} | 分数: ${res.score}
                            </p>
                            <p style="margin: 0;">
                                总场数: ${res.total_count} | 胜场: ${res.win_count} | 胜率: ${winRate}
                            </p>
                        </div>`;
                    /*4. 获取 screen 控件标签*/
                    var screen_div = document.getElementById("screen"); 
                    /*5. 添加用户信息 html 到 screen 控件中*/
                    screen_div.innerHTML = user_info_html ;

                    /*6. 建立大厅 websocket 长连接*/
                    ws = new WebSocket(ws_url); //创建连接
                    //设置监听机制
                    ws.onopen = ws_onopen;  //建立连接成功
                    ws.onclose = ws_onclose; //关闭连接
                    ws.onerror = ws_onerror; //建立连接失败
                    ws.onmessage = ws_onmessage; //收到服务器发送的消息时
                        
                },
                error : function(xhr)
                {   
                    /*错误了 , 替换当前页面为回登录界面进行登录*/
                    alert(JSON.stringify(xhr));
                    location.replace("/login.html");
                }
            })
        }
        //3. 调用获取用户信息函数
        get_user_info();
        //设置 websocket 监听函数
        function ws_onopen()
        {
            console.log("websockt onopen !");
        }
        function ws_onclose()
        {
            console.log("websockt onclose !");
        }
        function ws_onerror()
        {
            console.log("websockt onerror !");
        }
        //收到服务器发送的消息时的处理 , evt 里面就包含服务器发送的消息等
        function ws_onmessage(evt) {
            var rsp_json = JSON.parse(evt.data);
            if (rsp_json.result == false) {
                alert(evt.data);
                location.replace("/login.html");
                return;
            }
            if (rsp_json["optype"] == "hall_ready") {
                alert("游戏大厅连接建立成功！");
            }
            else if (rsp_json["optype"] == "match_success") {
                //对战匹配成功
                alert("对战匹配成功，进入游戏房间！");
                location.replace("/game_room.html");
            }
            else if (rsp_json["optype"] == "match_start") {
                console.log("玩家已经加入匹配队列");
                button_flag = "start";
                be.innerHTML = "匹配中....点击按钮停止匹配!";
                return;
            }
            else if (rsp_json["optype"] == "match_stop"){
                console.log("玩家已经移除匹配队列");
                button_flag = "stop";
                be.innerHTML = "开始匹配";
                return;
            }
            else {
                alert(evt.data);
                location.replace("/login.html");
                return;
            }
        }
    </script>
</body>
</html>